import React, { useEffect, useRef } from 'react';
import { NODE } from '../utils/constants';
export default function useDragToCreateNode(props) {
  const _cur = useRef(null);
  const _isDown = useRef(false);
  const _isMove = useRef(false); //是否移动过
  const componentName = useRef('');

  useEffect(() => {
    document.addEventListener('mousemove', handleMove);
    document.addEventListener('mouseup', handleStop);
    return () => {
      document.removeEventListener('mousemove', handleMove);
      document.removeEventListener('mouseup', handleStop);
    };
  }, []);

  function getComponent(componentName, e) {
    switch (componentName) {
      case NODE._START:
      case NODE._ACTION:
        return {
          width: 32,
          height: 32,
          x: (79 - 32) / 2,
          y: 1,
          content: e.currentTarget.innerHTML,
        };
      case NODE._STRATEGY:
        return {
          width: 100,
          height: 30,
          x: (79 - 100) / 2,
          y: (34 - 30) / 2,
          content: '节点',
        };
      case NODE._CHALLENGE:
        return {
          width: 260,
          height: 70,
          x: (79 - 100) / 2,
          y: (34 - 30) / 2,
          content: '冠军挑战',
        };
      default:
        return {};
    }
  }

  function handleDown(component, e) {
    if (props.disabled) {
      return;
    }
    pauseEvent(e);
    componentName.current = component;
    _isDown.current = true;
    const { width, height, content } = getComponent(component, e);
    const { clientX, clientY } = e;
    _cur.current.innerHTML = content;
    if (component === NODE._STRATEGY || component === NODE._CHALLENGE) {
      _cur.current.classList.add('node-' + NODE._STRATEGY);
    } else {
      _cur.current.children[0].style.width = '32px';
      _cur.current.children[0].style.height = '32px';
    }
    _cur.current.size = [width, height];
    _cur.current.style.cssText = `display:block;width:${width}px;height:${height}px;position:fixed;z-index:1000;left:${clientX -
      width / 2}px;top:${clientY - height / 2}px;`;
  }

  function handleMove(e) {
    if (props.disabled || !_cur.current) {
      return;
    }
    pauseEvent(e);
    if (!_isDown.current) {
      return;
    }
    _isMove.current = true;
    const { clientX, clientY } = e;
    const [width, height] = _cur.current.size;
    _cur.current.style.cssText = `display:block;width:${width}px;height:${height}px;position:fixed;z-index:1000;left:${clientX -
      width / 2}px;top:${clientY - height / 2}px`;
  }

  function handleStop(e) {
    if (props.disabled || !_cur.current) {
      return;
    }
    pauseEvent(e);
    if (!_cur.current || !_isDown.current || !_isMove.current) {
      return;
    }
    const { clientX, clientY } = e;
    const [width, height] = _cur.current.size;
    _isDown.current = false;
    _isMove.current = false;
    _cur.current.innerHTML = '';
    _cur.current.style.cssText = '';
    (componentName.current === NODE._STRATEGY || componentName.current === NODE._CHALLENGE) &&
      _cur.current.classList.remove('node-strategy'); // 移除样式
    const sourceId = props._graph && props._graph.current && props._graph.current._nodeMenu.id;
    console.log(componentName.current);
    const targetId =
      props.onAdd && props.onAdd(clientX - width / 2, clientY - height / 2, componentName.current, sourceId);

    // 非strategy节点，才直接连线
    if (componentName.current !== 'strategy') {
      // 如果sourceId 存在，则查找出他model信息
      if (sourceId) {
        const source = props._graph.current.findById(sourceId);
        if (!source) {
          return;
        }

        props.onAddEdge && props.onAddEdge(sourceId, targetId);
      }
    }

    componentName.current = '';
  }

  function pauseEvent(e) {
    if (e.stopPropagation) e.stopPropagation();
    if (e.preventDefault) e.preventDefault();
  }

  return {
    handleDown,
    _cur: <div ref={(ref) => (_cur.current = ref)} />,
  };
}
